CACH TAO BO CUC WAP
Table - bố cục một trang
web sử dụng bảng
Table - một yếu tố rất
quan trong trong các
Website đẹp. Table cho
phép bạn có một sự chính
xác đến từng pixel trong
bố cục của Homepage. Với
Table bạn có thể trang trí
và bố cục trang web của
mình như một tờ báo với
nhiều cột khác nhau.
Table làm cho trang web
của bạn có một layout
sinh động hơn. Trang này
chỉ đề cập tới những cái
cơ bản nhất của Table.
Cặp TAG <table></table>
tạo ra một Table. Như bạn
biết, một Table được tạo
ta từ nhiều dòng và mỗi
dòng lại có thể chứa
nhiều ô. Mỗi cặp TAG
<tr></tr> tạo ra một
dòng, trong dòng ấy bạn
có thể sử dụng nhiều cặp
TAG <td></td> để có
nhiều ô. Cũng như <p>,
<tr> và <td> thực ra là
một TAG đơn, không cần
đến </tr> và </td> nhưng
nếu cẩn thận, ta vẫn nên
dùng nó như một cặp
TAG.
HTML Code của bảng trên
được viết như sau:
Code:
<table border="1"
bordercolor="red"
width="80%"
align="center"
cellpadding="10"
cellspacing="5"
bgcolor="gray">
<tr>
<td width="33%"
bgcolor="#C0C0C0"
align="left">Dòng 1 - ô
1</td>
<td width="33%"
bgcolor="#C0C0C0"
align="left">Dòng 1 - ô
2</td>
<td width="34%"
bgcolor="#C0C0C0"
align="left">Dòng 1 - ô
3</td>
</tr>
<tr>
<td width="33%"
bgcolor="#C0C0C0"
align="left">Dòng 2 - ô
1</td>
<td width="33%"
bgcolor="#C0C0C0"
align="left">Dòng 2 - ô
2</td>
<td width="34%"
bgcolor="#feedd1"
align="left">Dòng 2 - ô
3</td>
</tr>
</table><table
width="100%"> cho biết
chiều rộng của table này
là 100%, con số này
không có một giá trị cố
định, nó sẽ thay đổi theo
mức rộng của màn ảnh
của người đến xem, như
vậy người xem không
phải scroll ngang. Nhưng
khi bạn dùng một giá trị
cố định, chẳng hạn:
width="800", Table này sẽ
luôn luôn rộng chừng ấy
pixel, bất kể màn ảnh là
800 hay 1024 pixels.
<td width="33%"> cho
biết, ô đó chiếm 33%
chiều rộng của dòng.
<table align="center">
hướng bảng vào trung
tâm của trang web, <td
align= "left"> định hướng
toàn bộ nội dung của một
ô. align có thể mang các
giá trị sau: "left" (gía trị
mặc định - không cần viết
cũng được),
"center" (trung tâm),
"right" (phải)
bgcolor có thể sử dụng
cho trang web (<body>),
toàn bộ table (<table>)
hoặc từng ô (<td>)
border="1"
bordercolor="red" có
nghĩa: bảng có khung với
độ dày 1, màu đỏ
Bạn có thể định khoảng
cách giữa nội dung và
khung trong một ô bằng
cellpadding,
cellpadding="10" có nghĩa
là text cách khung 10
pixels. Tương tự như vậy
với khoảng cách giữa các
ô trong bảng
(cellpadding):
cellspacing="5" có nghĩa
là các ô của table cách
nhau 5 pixels
Trong table trên, bạn thấy
các ô có chiều cao và
chiều rộng khác nhau,
chính xác hơn là ô bên
trái, phía dưới rộng bằng
2 ô trên, ô bên phải lại
cao bằng hai ô bên trái
nó. Ðiều đó được thực
hiện bởi colspan và
rowspan (xem HTML Code)
Code:
<table border="1"
cellpadding="10"
bordercolor="#FF0000"
width="80%"
cellspacing="5">
<tr>
<td width="33%"
valign="top" bgcolor="#
E8E8E8">Dòng 1 - ô 1</
td>
<td width="33%"
valign="top" bgcolor="#
E8E8E8">Dòng 1 - ô 2</
td>
<td width="34%"
valign="top" bgcolor="#
feedd1" rowspan="2">
<table width="100%"
cellpadding="5"
cellspacing="5"
border="0"
bgcolor="white">
<tr>
<td width="50%"
bgcolor="#
e8e8e8">Text</td>
<td width="50%"
bgcolor="#
e8e8e8">Text</td>
</tr>
<tr>
<td width="50%"
bgcolor="#
e8e8e8">Text</td>
<td width="50%"
bgcolor="#
e8e8e8">Text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="66%"
valign="top" bgcolor="#
ffcc99" colspan="2">Dòng
2 - 1 ô</td>
</tr>
</table>Và đặc biệt nữa là
trong ô bên phải, bạn lại
thấy một table nữa có hai
dòng, mỗi dòng hai ô.
Như vậy, bạn có thể lồng
một table trong một table
khác.
Cũng còn rất nhiều thủ
thuật trình bày nữa
nhưng tôi nghĩ, nếu sử
dụng những kỹ thuật trên
cùng với một chút sáng
tạo, bạn cũng đã đạt được
rất nhiều rồi. Có một điều
cần lưu ý là Netscape
Version 2 không thể hiện
được một table nền tối
với chữ sáng. Nhưng bạn
không cần ngại bởi ngày
nay chắc chẳng ai dùng
NS 2 nữa.
Frames - "Windows
Explorer" trong trang web
1. Frameset - Cols
Frames là sáng kiến của
[Netscape] bắt đầu từ
Navigator version 2.0.
[Microsoft] Internet
Explorer (version 3.0 trở
lên) cũng đọc được
Frames. Dùng Frames, bạn
có thể chia một window
ra làm nhiều phần riêng
biệt, không phụ thuộc vào
nhau và có thể chứa
những nội dung khác
nhau. Từ Frame này có
thể thay đổi nội dung của
Frame kia. Như vậy
website của bạn sẽ được
bố cục rõ ràng hơn, tiện
lợi hơn và người xem có
thể tìm được cái mình tìm
nhanh chóng hơn. Ai hay
sử dụng Windows
Explorer sẽ thấy được tác
dụng tương tự của
Frames.
Khi chia window, bạn sẽ
có ít nhất 2 Frames.
Những Frames này được
gọi là một Frame-Set. Một
trang sử dụng Frames có
cấu trúc cơ bản như sau:
Code:
<html>
<frameset>
</frameset>
</html>Ðể chia một
window ra làm hai phần
theo chiều dọc, phần bên
trái chiếm 30%, phần bên
phải 70% chiều rộng của
window ta làm như sau:
Code:
<html>
<frameset cols="30%,70%
">
<frame name ="ben trai"
src="trai.htm">
<frame name ="ben phai"
src="phai.htm">
</frameset>
</html>Bạn hãy [xem ví
dụ]
2. Frameset - Rows
Tương tự như vậy ta chia
theo chiều ngang, nhưng
lần này chia làm 3 phần
(30%, 50% và * là phần
còn lại của màn hình):
Code:
<html>
<frameset rows="30%
,50%,*">
<frame name ="tren"
src="tren.htm">
<frame name ="duoi"
src="duoi.htm">
<frame name ="con_lai"
src="conlai.htm">
</frameset>
</html>Bạn hãy [xem ví
dụ]
3. Frameset - Giải thích
* cols (columns) chia
window theo chiều dọc.
Các giá trị 30% , 70% có
thể được thay bằng số
pixels như 150 , 500
* rows cho phép chia theo
chiều ngang. 30%, 50% là
chiều cao của hai Frames
đầu. Dấu * cho biết chiều
cao của Frame thứ 3 là
phần còn lại của window.
* <frame name ="ben
trai" src="trai.htm"> tên
và nội dung của frame
bên trái. Bạn cứ tưởng
tượng, bạn tạo được một
khung ảnh có hai ngăn
(tương tự như một
frameset), mỗi ngăn chứa
một bức ảnh (đây là một
trang web). Frame bên
trái tên là "trai" và chứa
trang "trai.htm". Tương tự
như vậy với "ben phai",
"phai.htm", "tren",
"tren.htm", "duoi",
"duoi.htm", "con_lai",
"conlai.htm"
4. Frames - Navigation
Menu
Như vậy ta đã có được
những bức ảnh trong
khung. Nhưng mục đích
chính của Frames không
phải là làm thế nào để có
nhiều trang trong một
window mà là làm thế
nào để dùng link của
Frame này thay đổi nội
dung của Frame kia. Bây
giờ ta hãy thử dùng trang
"trai.htm" làm navigation
để thay đổi nội dung
Frame "phai". Khi đó ta
phải dùng thêm một
dòng code nữa trong
trang "trai.htm".
Code:
<base target="ben
phai">Bạn hãy click "xem
vi du" sau đó dùng chuột
phải click vào trang
"trai.htm" trong frame
"trai" để xem html-code.
Bạn hãy [xem ví dụ]
4. Frameset in Frameset
Và một ví dụ nữa sẽ cho
thấy khả năng của
Frames. Trong ví dụ này,
đầu tiên ta chia window
ra làm 2 phần sau đó lại
chia phần thứ 2 ra làm
đôi. Code của nó như sau:
Code:
<html>
<frameset rows="20%
,70%">
<frame src="tren.htm"
name="ben tren">
<noframe>
<frameset cols="20%,80%
">
<frame src="trai.htm"
name="ben trai">
<frame src="phai.htm"
name="ben phai">
</frameset>
<body>
This page uses frames but
your browser doesn't
support them.
Please download a higher
version and visit me
again. Thanks anyway!
</body>
</html>Bạn thấy đấy, ta
đã chia window ra làm 4
Frames nhưng chỉ thấy có
3. Ðó là tác dụng của tag
<noframe> Hiện nay số
lượng browser không biết
Frames hầu như không
còn nữa, nhưng để chắc
chắn, ta hãy viết thêm
một phần <body> và chú
thích rằng browser của
người đọc không biết
frames, nếu không người
đó sẽ chẳng đọc được một
chữ gì khi đến thăm
homepage của bạn.
Bạn hãy [xem ví dụ]
Ngoài ra còn một số đặc
tính khác của Frames như:
* scrolling="no" (nếu bạn
viết như vậy trong tag
<frameset>, người đọc sẽ
không thể scroll để đọc
tiếp nếu như trang html
có cỡ to hơn Frame chứa
nó).
* frameborder="0" (frame
không có khung)
*
framespacing="0" (tương
tự như trong table)
* noresize (không cho
phép người đọc thay đổi
kích cỡ của window